import React from 'react';
import styles from './Ltian.module.css';
import { useNavigate } from 'react-router-dom';
// 底部导航栏组件
const BottomNavigation = ({ activeTab, navigate }) => {
  const navItems = [
    { id: 'homepage', icon: '🏠', name: '首页' },
    { id: 'ltian', icon: '👥', name: '好友' },
    { id: 'vipvr', icon: 'VIP', name: '未开通' },
    { id: 'layout', icon: '🎬', name: '视频' },
    { id: 'my', icon: '👤', name: '我的' }
  ];
  return (
    <div style={{
      position: 'fixed',
      left: 0, right: 0, bottom: 0,
      height: 56,
      background: '#fff',
      borderTop: '1px solid #eee',
      display: 'flex',
      zIndex: 100
    }}>
      {navItems.map(item => (
        <div
          key={item.id}
          onClick={() => navigate('/' + item.id)}
          style={{
            flex: 1,
            textAlign: 'center',
            padding: '6px 0 2px 0',
            color: activeTab === item.id ? '#06c05f' : '#888',
            fontWeight: activeTab === item.id ? 600 : 400,
            fontSize: 15,
            cursor: 'pointer'
          }}
        >
          <div style={{ fontSize: 22 }}>{item.icon}</div>
          <div style={{ fontSize: 13 }}>{item.name}</div>
        </div>
      ))}
    </div>
  );
};

export default function WeChatList() {

    const navigate = useNavigate();
  // 模拟聊天数据
  const chats = [
    {
      name: "爱吃柠檬",
      avatar: "../public/微信头像.jpg",
      lastMessage: "[图片]",
      time: "10:51",
      unread: 0,
      tag: "(国宝特工)"
    },
    {
      name: "李小龙",
      avatar: "../public/6.jpg",
      lastMessage: "今天吃啥",
      time: "昨天",
      unread: 0
    },
    {
      name: "李小璐",
      avatar: "../public/7.jpg",
      lastMessage: "",
      time: "6月29日",
      unread: 0
    },  
    {
      name: "刘家兴",
      avatar: "../public/12.jpg",
      lastMessage: "",
      time: "6月19日",
      unread: 0
    },
    {
      name: "懒得起名",
      avatar: "../public/9.jpg",
      lastMessage: "[视频通话]",
      time: "6月14日",
      unread: 0
    },
    {
      name: "刘明",
      avatar: "../public/10.jpg",
      lastMessage: "好家伙",
      time: "6月9日",
      unread: 0
    },
    {
      name: "幸福一家人",
      avatar: "../public/11.jpg",
      lastMessage: "大姐:今天出院了",
      time: "10:49",
      unread: 0
    },
 

  ];

  return (
    <div className={styles.wechatApp}>
      {/* 顶部标题栏 */}
      <div className={styles.header}>
        <div className={styles.title}>聊天(9)</div>
      </div>
      
      {/* 搜索栏 */}
      <div className={styles.searchBar}>
        <div
          className={styles.searchIcon}
          onClick={() => navigate(-1)}
          style={{ cursor: 'pointer' }}
          aria-label="返回"
          title="返回"
        >
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M15 18l-6-6 6-6" stroke="#222" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <input 
          type="text" 
          placeholder="搜索" 
          className={styles.searchInput}
        />
      </div>
      
      {/* 聊天列表 */}
      <div className={styles.chatList}>
        {chats.map((chat, index) => (
          <div key={index} className={styles.chatItem}
          onClick={() => navigate('/liao')}
          >
            <div className={styles.avatar}><img src={chat.avatar} alt="" width={40} /></div>
            <div className={styles.chatContent}>
              <div className={styles.chatTop}>
                <span className={styles.name}>{chat.name}</span>
                <span className={styles.time}>{chat.time}</span>
              </div>
              <div className={styles.chatBottom}>
                <span className={styles.message}>{chat.lastMessage}</span>
                {chat.unread > 0 && (
                  <span className={styles.unread}>{chat.unread}</span>
                )}
                {chat.tag && <span className={styles.tag}>{chat.tag}</span>}
              </div>
            </div>
          </div>
        ))}
      </div>
      
      {/* 底部导航栏 */}
      <BottomNavigation activeTab="ltian" navigate={navigate} />
    </div>
  );
}